/* 栅格系统 */
.container {
    padding: 0 15px;
    margin: 0 auto;
  }
  
  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }
  
  @media (min-width: 992px) {
    .container {
      width: 970px;
    }
  }
  
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  }
  
  .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 15px;
  }
  
  @media screen and (min-width: 1200px) {
    .col-lg-1 {
      grid-column-end: span 1;
    }
  
    .col-lg-2 {
      grid-column-end: span 2;
    }
  
    .col-lg-3 {
      grid-column-end: span 3;
    }
  
    .col-lg-4 {
      grid-column-end: span 4;
    }
  
    .col-lg-5 {
      grid-column-end: span 5;
    }
  
    .col-lg-6 {
      grid-column-end: span 6;
    }
  
    .col-lg-7 {
      grid-column-end: span 7;
    }
  
    .col-lg-8 {
      grid-column-end: span 8;
    }
  
    .col-lg-9 {
      grid-column-end: span 9;
    }
  
    .col-lg-10 {
      grid-column-end: span 10;
    }
  
    .col-lg-11 {
      grid-column-end: span 11;
    }
  
    .col-lg-12 {
      grid-column-end: span 12;
    }
  }
  
  /* @media screen and (max-width: 1200px) {
    .col-lg-1 {
      grid-column-end: span 12;
    }
  
    .col-lg-2 {
      grid-column-end: span 12;
    }
  
    .col-lg-3 {
      grid-column-end: span 12;
    }
  
    .col-lg-4 {
      grid-column-end: span 12;
    }
  
    .col-lg-5 {
      grid-column-end: span 12;
    }
  
    .col-lg-6 {
      grid-column-end: span 12;
    }
  
    .col-lg-7 {
      grid-column-end: span 12;
    }
  
    .col-lg-8 {
      grid-column-end: span 12;
    }
  
    .col-lg-9 {
      grid-column-end: span 12;
    }
  
    .col-lg-10 {
      grid-column-end: span 12;
    }
  
    .col-lg-11 {
      grid-column-end: span 12;
    }
  
    .col-lg-12 {
      grid-column-end: span 12;
    }
  } */
  
  /* md------------------------- */
  
  @media screen and (min-width: 992px) and (max-width: 1200px) {
  
    .col-md-1 {
      grid-column-end: span 1;
    }
  
    .col-md-2 {
      grid-column-end: span 2;
    }
  
    .col-md-3 {
      grid-column-end: span 3;
    }
  
    .col-md-4 {
      grid-column-end: span 4;
    }
  
    .col-md-5 {
      grid-column-end: span 5;
    }
  
    .col-md-6 {
      grid-column-end: span 6;
    }
  
    .col-md-7 {
      grid-column-end: span 7;
    }
  
    .col-md-8 {
  
      grid-column-end: span 8;
    }
  
    .col-md-9 {
      grid-column-end: span 9;
    }
  
    .col-md-10 {
      grid-column-end: span 10;
    }
  
    .col-md-11 {
      grid-column-end: span 11;
    }
  
    .col-md-12 {
      grid-column-end: span 12;
    }
  }
  
  /* @media screen and (max-width: 992px) {
  
    .col-md-1 {
      grid-column-end: span 12;
    }
  
    .col-md-2 {
      grid-column-end: span 12;
    }
  
    .col-md-3 {
      grid-column-end: span 12;
    }
  
    .col-md-4 {
      grid-column-end: span 12;
    }
  
    .col-md-5 {
      grid-column-end: span 12;
    }
  
    .col-md-6 {
      grid-column-end: span 12;
    }
  
    .col-md-7 {
      grid-column-end: span 12;
    }
  
    .col-md-8 {
  
      grid-column-end: span 12;
    }
  
    .col-md-9 {
      grid-column-end: span 12;
    }
  
    .col-md-10 {
      grid-column-end: span 12;
    }
  
    .col-md-11 {
      grid-column-end: span 12;
    }
  
    .col-md-12 {
      grid-column-end: span 12;
    }
  } */
  /* @media screen and (min-width: 1200px) {
  
    .col-md-1 {
      grid-column-end: span 12;
    }
  
    .col-md-2 {
      grid-column-end: span 12;
    }
  
    .col-md-3 {
      grid-column-end: span 12;
    }
  
    .col-md-4 {
      grid-column-end: span 12;
    }
  
    .col-md-5 {
      grid-column-end: span 12;
    }
  
    .col-md-6 {
      grid-column-end: span 12;
    }
  
    .col-md-7 {
      grid-column-end: span 12;
    }
  
    .col-md-8 {
  
      grid-column-end: span 12;
    }
  
    .col-md-9 {
      grid-column-end: span 12;
    }
  
    .col-md-10 {
      grid-column-end: span 12;
    }
  
    .col-md-11 {
      grid-column-end: span 12;
    }
  
    .col-md-12 {
      grid-column-end: span 12;
    }
  } */
  
  
  
  /* sm-------- */
  @media screen and (min-width: 768px) and (max-width: 992px) {
    .col-sm-1 {
      grid-column-end: span 1;
    }
  
    .col-sm-2 {
      grid-column-end: span 2;
    }
  
    .col-sm-3 {
      grid-column-end: span 3;
    }
  
    .col-sm-4 {
      grid-column-end: span 4;
    }
  
    .col-sm-5 {
      grid-column-end: span 5;
    }
  
    .col-sm-6 {
      grid-column-end: span 6;
    }
  
    .col-sm-7 {
      grid-column-end: span 7;
    }
  
    .col-sm-8 {
  
      grid-column-end: span 8;
    }
  
    .col-sm-9 {
      grid-column-end: span 9;
    }
  
    .col-sm-10 {
      grid-column-end: span 10;
    }
  
    .col-sm-11 {
      grid-column-end: span 11;
    }
  
    .col-sm-12 {
      grid-column-end: span 12;
    }
  }
  
  /* @media screen and (max-width: 768px) {
    .col-sm-1 {
      grid-column-end: span 12;
    }
  
    .col-sm-2 {
      grid-column-end: span 12;
    }
  
    .col-sm-3 {
      grid-column-end: span 12;
    }
  
    .col-sm-4 {
      grid-column-end: span 12;
    }
  
    .col-sm-5 {
      grid-column-end: span 12;
    }
  
    .col-sm-6 {
      grid-column-end: span 12;
    }
  
    .col-sm-7 {
      grid-column-end: span 12;
    }
  
    .col-sm-8 {
  
      grid-column-end: span 12;
    }
  
    .col-sm-9 {
      grid-column-end: span1 12;
    }
  
    .col-sm-10 {
      grid-column-end: span 12;
    }
  
    .col-sm-11 {
      grid-column-end: span 12;
    }
  
    .col-sm-12 {
      grid-column-end: span 12;
    }
  } */
  /* @media screen and (min-width: 992px) {
    .col-sm-1 {
      grid-column-end: span 12;
    }
  
    .col-sm-2 {
      grid-column-end: span 12;
    }
  
    .col-sm-3 {
      grid-column-end: span 12;
    }
  
    .col-sm-4 {
      grid-column-end: span 12;
    }
  
    .col-sm-5 {
      grid-column-end: span 12;
    }
  
    .col-sm-6 {
      grid-column-end: span 12;
    }
  
    .col-sm-7 {
      grid-column-end: span 12;
    }
  
    .col-sm-8 {
  
      grid-column-end: span 12;
    }
  
    .col-sm-9 {
      grid-column-end: span1 12;
    }
  
    .col-sm-10 {
      grid-column-end: span 12;
    }
  
    .col-sm-11 {
      grid-column-end: span 12;
    }
  
    .col-sm-12 {
      grid-column-end: span 12;
    }
  } */
  
  
  
  /* xs ------------- */
  @media screen and (max-width: 768px) {
    .col-xs-1 {
      grid-column-end: span 1;
    }
  
    .col-xs-2 {
      grid-column-end: span 2;
    }
  
    .col-xs-3 {
      grid-column-end: span 3;
    }
  
    .col-xs-4 {
      grid-column-end: span 4;
    }
  
    .col-xs-5 {
      grid-column-end: span 5;
    }
  
    .col-xs-6 {
      grid-column-end: span 6;
    }
  
    .col-xs-7 {
      grid-column-end: span 7;
    }
  
    .col-xs-8 {
  
      grid-column-end: span 8;
    }
  
    .col-xs-9 {
      grid-column-end: span 9;
    }
  
    .col-xs-10 {
      grid-column-end: span 10;
    }
  
    .col-xs-11 {
      grid-column-end: span 11;
    }
  
    .col-xs-12 {
      grid-column-end: span 12;
    }
  }
  
  /* @media screen and (min-width: 768px) {
    .col-xs-1 {
      grid-column-end: span 12;
    }
  
    .col-xs-2 {
      grid-column-end: span 12;
    }
  
    .col-xs-3 {
      grid-column-end: span 12;
    }
  
    .col-xs-4 {
      grid-column-end: span 12;
    }
  
    .col-xs-5 {
      grid-column-end: span 12;
    }
  
    .col-xs-6 {
      grid-column-end: span 12;
    }
  
    .col-xs-7 {
      grid-column-end: span 12;
    }
  
    .col-xs-8 {
  
      grid-column-end: span 12;
    }
  
    .col-xs-9 {
      grid-column-end: span 12;
    }
  
    .col-xs-10 {
      grid-column-end: span 12;
    }
  
    .col-xs-11 {
      grid-column-end: span 12;
    }
  
    .col-xs-12 {
      grid-column-end: span 12;
    }
  } */
  
  /* ---------- */
  .row-1-10 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 0 15px;
  }
  
  @media screen and (min-width: 1200px) {
    .col-lg-1-10 {
      grid-column-end: span 1;
    }
  
    .col-lg-2-10 {
      grid-column-end: span 2;
    }
  
    .col-lg-3-10 {
      grid-column-end: span 3;
    }
  
    .col-lg-4-10 {
      grid-column-end: span 4;
    }
  
    .col-lg-5-10 {
      grid-column-end: span 5;
    }
  
    .col-lg-6-10 {
      grid-column-end: span 6;
    }
  
    .col-lg-7-10 {
      grid-column-end: span 7;
    }
  
    .col-lg-8-10 {
      grid-column-end: span 8;
    }
  
    .col-lg-9-10 {
      grid-column-end: span 9;
    }
  
    .col-lg-10-10 {
      grid-column-end: span 10;
    }
  
  }
  
  /* ----------------- */
  @media screen and (min-width: 992px) and (max-width: 1200px) {
  
    .col-md-1-10 {
      grid-column-end: span 1;
    }
  
    .col-md-2-10 {
      grid-column-end: span 2;
    }
  
    .col-md-3-10 {
      grid-column-end: span 3;
    }
  
    .col-md-4-10 {
      grid-column-end: span 4;
    }
  
    .col-md-5-10 {
      grid-column-end: span 5;
    }
  
    .col-md-6-10 {
      grid-column-end: span 6;
    }
  
    .col-md-7-10 {
      grid-column-end: span 7;
    }
  
    .col-md-8-10 {
      grid-column-end: span 8;
    }
  
    .col-md-9-10 {
      grid-column-end: span 9;
    }
  
    .col-md-10-10 {
      grid-column-end: span 10;
    }
  }
  
  /* -------------------- */
  @media screen and (min-width: 768px) and (max-width: 992px) {
    .col-sm-1-10 {
      grid-column-end: span 1;
    }
  
    .col-sm-2-10 {
      grid-column-end: span 2;
    }
  
    .col-sm-3-10 {
      grid-column-end: span 3;
    }
  
    .col-sm-4-10 {
      grid-column-end: span 4;
    }
  
    .col-sm-5-10 {
      grid-column-end: span 5;
    }
  
    .col-sm-6-10 {
      grid-column-end: span 6;
    }
  
    .col-sm-7-10 {
      grid-column-end: span 7;
    }
  
    .col-sm-8-10 {
      grid-column-end: span 8;
    }
  
    .col-sm-9-10 {
      grid-column-end: span 9;
    }
  
    .col-sm-10-10 {
      grid-column-end: span 10;
    }
  }
  
  /* ----------------- */
  @media screen and (max-width: 768px) {
  
    .col-xs-1-10 {
      grid-column-end: span 1;
    }
  
    .col-xs-2-10 {
      grid-column-end: span 2;
    }
  
    .col-xs-3-10 {
      grid-column-end: span 3;
    }
  
    .col-xs-4-10 {
      grid-column-end: span 4;
    }
  
    .col-xs-5-10 {
      grid-column-end: span 5;
    }
  
    .col-xs-6-10 {
      grid-column-end: span 6;
    }
  
    .col-xs-7-10 {
      grid-column-end: span 7;
    }
  
    .col-xs-8-10 {
      grid-column-end: span 8;
    }
  
    .col-xs-9-10 {
      grid-column-end: span 9;
    }
  
    .col-xs-10-10 {
      grid-column-end: span 10;
    }
  }
  
  /* -------------- */
  .row-1-30 {
  
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    /* gap: 0 10px; */
  
  }
  
  @media screen and (min-width: 992px) and (max-width: 1200px) {
    .col-md-3-30 {
      grid-column-end: span 3;
    }
  }
  
  @media screen and (min-width: 1200px) {
    .col-lg-3-30 {
      grid-column-end: span 3;
    }
  }
  
  @media screen and (min-width: 768px) and (max-width: 992px) {
    .col-sm-6-30 {
      grid-column-end: span 6;
    }
  }
  
  @media screen and (max-width: 768px) {
    .col-xs-10-30 {
      grid-column-end: span 10;
    }
  }